<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">        
        <link rel="stylesheet" href="../../js/jquery/themes/default/easyui.css" type="text/css" />
        <link rel="stylesheet" href="../../js/jquery/themes/icon.css" type="text/css" />
        <link rel="stylesheet" href="../../js/jquery/themes/color.css" type="text/css" />
        <link rel="stylesheet" href="../../css/demo.css" type="text/css" />
        <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>   
        <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
        <script type="text/javascript" src ="../../js/jquery/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="../../js/jquery/locale/easyui-lang-zh_CN.js"></script>
        <script type="text/javascript">
                    //校验年月格式
            function validateYearMonth(ym){
                if (typeof (ym) == 'undefined' || !ym){
                    return false;
                }
                if (ym.length != 6){
                    return false;
                }
                let y = ym.substring(0, 4);
                if (y < '2000' && y > '2050'){
                    return false;
                }
                let m = ym.substring(4);
                if (m > '12' || m < '01'){
                    return false;
                }
                return true;
            }
                    function getData() {
                    var chart1 = echarts.init(document.getElementById('chart1'));
                            var chart2 = echarts.init(document.getElementById('chart2'));
                            var chart3 = echarts.init(document.getElementById('chart3'));
                            var chart4 = echarts.init(document.getElementById('chart4'));
                            var chart5 = echarts.init(document.getElementById('chart5'));
                            var chart6 = echarts.init(document.getElementById('chart6'));
                            var chart7 = echarts.init(document.getElementById('chart7'));
                            var startYearMonth = $('#startYearMonth').textbox('getValue');
                            var endYearMonth = $('#endYearMonth').textbox('getValue');
                            //校验输入年月是否正确
                            if (!validateYearMonth(startYearMonth) || !validateYearMonth(endYearMonth)){
                    alert('输入年月格式不正确，请重新输入。格式：202108');
                            return;
                    }
                    if (endYearMonth < startYearMonth){
                    alert('结束年月不能小于开始年月，请重新输入。');
                            return;
                    }
                    var companies = [];
                            var i = 0;
                            for (i = 0; i < orgCheckboxes.length; i++){
                    if (orgCheckboxes[i].checkbox('options').checked){
                    companies.push(orgCheckboxes[i].checkbox('options').value);
                    }
                    }
                    var models = [];
                            for (i = 0; i < ckdCheckboxes.length; i++){
                    if (ckdCheckboxes[i].checkbox('options').checked){
                    models.push(ckdCheckboxes[i].checkbox('options').value);
                    }
                    }
                    //var models = [];
                    for (i = 0; i < fbuCheckboxes.length; i++){
                    if (fbuCheckboxes[i].checkbox('options').checked){
                    models.push(fbuCheckboxes[i].checkbox('options').value);
                    }
                    }

                    $.post('../../servlet/charts/GetChartsData',
                    {
                    startYearMonth:startYearMonth,
                            endYearMonth:endYearMonth,
                            companies:companies,
                            models:models
                    },
                            function(data) {
                            chart1.setOption({
                            color: ['#3398DB'],
                                    tooltip: {
                                    trigger: 'axis',
                                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                            type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                                            }
                                    },
                                    title: {
                                    text: '单月/累计的单台GP3',
                                            left:'center'
                                    },
                                    xAxis: {
                                    type: 'category',
                                            data: data.companyNames
                                    },
                                    yAxis: {
                                    type: 'value'
                                    },
                                    toolbox: {
                                    feature: {
                                   
                                            dataView: {},
                                            saveAsImage: {}
                                    },
                                            show: true
                                    },
                                    series: [{
                                    data: data.gp3,
                                            type: 'bar',
                                            showBackground: true,
                                            backgroundStyle: {
                                            color: 'rgba(180, 180, 180, 0.2)'
                                            }
                                    }]
                            });
                                    chart2.setOption({
                                    title: {
                                    text: '单月平均单台GP3趋势图'
                                    },
                                            legend: {
                                            // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                                            orient: 'horizontal',
                                                    // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                                                    x: 'left',
                                                    // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                                                    y: 'bottom',
                                                    data: ['全部', '镇江', '丹阳', '扬中']
                                            },
                                            // 提示框
                                            tooltip: {
                                            trigger: 'axis'
                                            },
                                            //工具框，可以选择
                                            toolbox: {
                                            feature: {
                                                dataView: {},
                                            saveAsImage: {} //下载工具
                                            }
                                            },
                                            xAxis: {
                                            name: '年月',
                                                    type: 'category',
                                                    data: data.yearMonth
                                            },
                                            yAxis: {
                                            name: '数值',
                                                    type: 'value'
                                            },
                                            series: [
                                            {
                                            name: '全部',
                                                    data: data.allGp3,
                                                    type: 'line',
                                                    smooth: 0.5,
                                            },
                                            {
                                            name: '镇江',
                                                    data: data.zjGp3,
                                                    type: 'line',
                                                    smooth:0.5
                                            },
                                            {
                                            name: '丹阳',
                                                    data: data.dyGp3,
                                                    type: 'line',
                                                    smooth:0.5
                                            },
                                            {
                                            name: '扬中',
                                                    data: data.yzGp3,
                                                    type: 'line',
                                                    smooth:0.5
                                            }
                                            ]
                                    });
                                    chart3.setOption({
                                    color: ['#3398DB'],
                                            tooltip: {
                                            trigger: 'axis',
                                                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                                    type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                                                    }
                                            },
                                            title: {
                                            text: '单月平均的单台毛利',
                                                    left:'center'
                                            },
                                            xAxis: {
                                            type: 'category',
                                                    data: data.companyNames
                                            },
                                            yAxis: {
                                            type: 'value'
                                            },
                                            toolbox: {
                                            feature: {
                                           
                                                    dataView: {},
                                                    saveAsImage: {}
                                            },
                                                    show: true
                                            },
                                            series: [{
                                            data: data.maoli,
                                                    type: 'bar',
                                                    showBackground: true,
                                                    backgroundStyle: {
                                                    color: 'rgba(180, 180, 180, 0.2)'
                                                    }
                                            }]
                                    });
                                    chart4.setOption({
                                    title: {
                                    text: '单月平均单台毛利趋势图'
                                    },
                                            legend: {
                                            orient: 'horizontal',
                                                    x: 'center',
                                                    y: 'bottom',
                                                    data: ['全部', '镇江', '丹阳', '扬中']
                                            },
                                            tooltip: {
                                            trigger: 'axis'
                                            },
                                            toolbox: {
                                            feature: {
                                                dataView: {},
                                            saveAsImage: {} //下载工具
                                            }
                                            },
                                            xAxis: {
                                            name: '年月',
                                                    type: 'category',
                                                    data:data.yearMonth
                                            },
                                            yAxis: {
                                            name: '销量',
                                                    type: 'value'
                                            },
                                            series: [{
                                            name: '全部',
                                                    data: data.allMaoli,
                                                    type: 'line',
                                                    smooth: 0.5,
                                            },
                                            {
                                            name: '镇江',
                                                    data: data.zjMaoli,
                                                    type: 'line',
                                                    smooth: 0.5,
                                            },
                                            {
                                            name: '丹阳',
                                                    data: data.dyMaoli,
                                                    type: 'line',
                                                    smooth: 0.5,
                                            },
                                            {
                                            name: '扬中',
                                                    data: data.yzMaoli,
                                                    type: 'line',
                                                    smooth: 0.5,
                                            }
                                            ]
                                    });
                                    chart5.setOption({
                                    title: {
                                    text: '三店销量统计',
                                            left: 'center'
                                    },
                                            tooltip: {
                                            trigger: 'item',
                                                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                                            },
                                            legend: {
                                            type: 'scroll',
                                                    orient: 'vertical',
                                                    right: 10,
                                                    top: 100,
                                                    bottom: 20
                                            },
                                            toolbox: {
                                            feature: {
                                                    dataView: {},
                                                    saveAsImage: {}
                                            },
                                                    show: true
                                            },
                                            series: [
                                            {
                                            name: '三店销量统计',
                                                    type: 'pie', // 设置图表类型为饼图
                                                    radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                                                    center: ['40%', '50%'],
                                                    data: data.modelPie
                                            }
                                            ]
                                    });
                                    chart6.setOption({
                                    title: {
                                    text: '三店销量趋势图'
                                    },
                                            legend: {
                                            orient: 'horizontal',
                                                    x: 'center',
                                                    y: 'bottom',
                                                    data: ['全部', '镇江', '丹阳', '扬中']
                                            },
                                            tooltip: {
                                            trigger: 'axis'
                                            },
                                            toolbox: {
                                            feature: {
                                                dataView: {},
                                            saveAsImage: {} //下载工具
                                            }
                                            },
                                            xAxis: {
                                            name: '年月',
                                                    type: 'category',
                                                    data:data.yearMonth
                                            },
                                            yAxis: {
                                            name: '销量',
                                                    type: 'value'
                                            },
                                            series: [{
                                            name: '全部',
                                                    data: data.allVolumn,
                                                    type: 'line',
                                                    smooth: 0.5
                                            },
                                            {
                                            name: '镇江',
                                                    data: data.zjVolumn,
                                                    type: 'line',
                                                    smooth:0.5
                                            },
                                            {
                                            name: '丹阳',
                                                    data: data.dyVolumn,
                                                    type: 'line',
                                                    smooth:0.5
                                            },
                                            {
                                            name: '扬中',
                                                    data: data.yzVolumn,
                                                    type: 'line',
                                                    smooth:0.5
                                            }
                                            ]
                                    });
                                    chart7.setOption({
                                    title: {
                                    text: '销售流向统计',
                                            left: 'center'
                                    },
                                            tooltip: {
                                            trigger: 'item',
                                                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                                            },
                                            legend: {
                                            type: 'scroll',
                                                    orient: 'vertical',
                                                    right: 10,
                                                    top: 100,
                                                    bottom: 20
                                            },
                                            toolbox: {
                                            feature: {                                            
                                                    dataView: {},
                                                    saveAsImage: {}
                                            },
                                                    show: true
                                            },
                                            series: [
                                            {
                                            name: '三店销量统计',
                                                    type: 'pie', // 设置图表类型为饼图
                                                    radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                                                    center: ['40%', '50%'],
                                                    data: data.goWhere
                                            }
                                            ]
                                    });
                            }, 'json');
                    }

                    var orgCheckboxes = [];
                            var fbuCheckboxes = [];
                            var ckdCheckboxes = [];
                            //选中所有分公司
                                    function checkAllOrg(){
                                    let i = 0;
                                            for (i = 0; i < 3; i++){
                                    orgCheckboxes[i].checkbox('check');
                                    }
                                    }
                            //取消所有分公司选择
                            function unCheckAllOrg(){
                            let i = 0;
                                    for (i = 0; i < 3; i++){
                            orgCheckboxes[i].checkbox('uncheck');
                            }
                            }
                            //
                            function checkAllCkd(){
                            let i = 0;
                                    for (i = 0; i < ckdCheckboxes.length; i++){
                            ckdCheckboxes[i].checkbox('check');
                            }
                            }
                            //取消所有国产车系选择
                            function uncheckAllCkd(){
                            let i = 0;
                                    for (i = 0; i < ckdCheckboxes.length; i++){
                            ckdCheckboxes[i].checkbox('uncheck');
                            }
                            }

                            //
                            function checkAllFbu(){
                            let i = 0;
                                    for (i = 0; i < fbuCheckboxes.length; i++){
                            fbuCheckboxes[i].checkbox('check');
                            }
                            }
                            function uncheckAllFbu(){
                            let i = 0;
                                    for (i = 0; i < fbuCheckboxes.length; i++){
                            fbuCheckboxes[i].checkbox('uncheck');
                            }
                            }
                            //是否三店都选中
                            function isAllOrgChecked(){
                            let flag = true;
                                    let i = 0;
                                    for (i = 0; i < 3; i++){
                            if (!orgCheckboxes[i].checkbox('options').checked){
                            flag = false;
                            }
                            }
                            return flag;
                            }

                            //绑定设置三店复选框事件，如果全选中，则将全部按钮选中，否则取消“全部”按钮选中
                            function bind3StoreListener(){
                            let i = 0;
                                    for (i = 0; i < 3; i++){
                            orgCheckboxes[i].checkbox({
                            onChange:function(){
                            if (isAllOrgChecked()){
                            $('#org10').checkbox('check');
                            } else{
                            $('#org10').checkbox('uncheck');
                            }
                            }
                            })
                            }
                            }

                            function getClzb(){
                            $.get('../../servlet/charts/GetClzb',
                                    function(data) {
                                    let dataObj = JSON.parse(data);
                                            let size = dataObj.size;
                                            let i = 0;
                                            let models = dataObj.clzb;
                                            let fbu = dataObj.fbu;
                                            let ckd = dataObj.ckd;
                                         for (i = 0; i < ckd.length; i++){
                                            let cbid = 'cbckd' + i;
                                            let v = ckd[i];
                                            let e = '<input id="' + cbid + '" value="' + v + '" label="' + v + '" labelPosition="after" type="text"/>';
                                            $('#ckdCheckboxes').append(e);
                                            $('#' + cbid).checkbox({checked:true});
                                            ckdCheckboxes.push($('#' + cbid));
                                            if(i==10||i==21){
                                                $('#ckdCheckboxes').append('<br/>');
                                            }
                                    }
                                    createCheckbox("ckdCheckboxes", 'cbckd00', 'allckd', '全部国产');
                                            $('#cbckd00').checkbox({
                                    onChange:function(checked){
                                    if (checked){
                                    checkAllCkd();
                                    } else{
                                    uncheckAllCkd();
                                    }
                                    }
                                    });
                                    for (i = 0; i < fbu.length; i++){
                                        let cbid = 'cbfbu' + i;
                                        let v = fbu[i];
                                        fbuCheckboxes.push(createCheckbox('fbuCheckboxes', cbid, v, v));
                                        if(i==10||i==21){
                                            $('#fbuCheckboxes').append('<br/>');
                                        }
                                    }
                                    createCheckbox("fbuCheckboxes", 'cbfbu00', 'allfbu', '全部进口');
                                            $('#cbfbu00').checkbox({
                                    onChange:function(checked){
                                    if (checked){
                                    checkAllFbu();
                                    } else{
                                    uncheckAllFbu();
                                    }
                                    }
                                    });
                                    });
                            }

                            //pid 父元素id,复选框id,复选框值,复选框label
                            function createCheckbox(pid, cbid, v, label){
                            let e = '<input id="' + cbid + '" value="' + v + '" label="' + label + '" labelPosition="after" type="text"/>';
                                    $('#' + pid).append(e);
                                    $('#' + cbid).checkbox({checked:true, value:v});
                                    return $('#' + cbid);
                            }
            $(document).ready(function() {
                //获取当前时间,设置出事年月
                
                let now = new Date();
                let year = now.getFullYear();
                let month = now.getMonth()+1;
                let startYearMonth=year+"01";
                let endYearMonth;
                if(month<10){
                    endYearMonth=year+"0"+month;
                }else{
                    endYearMonth = year+""+month;
                }
                $('#startYearMonth').textbox('setValue',startYearMonth);
                $('#endYearMonth').textbox('setValue',endYearMonth);
                
                orgCheckboxes.push($('#org1001'));
                orgCheckboxes.push($('#org1002'));
                orgCheckboxes.push($('#org1003'));
                //选择全部公司
                var currentOrgId = 'org10';
                $('#' + currentOrgId).checkbox('check');
                checkAllOrg();
                //bind3StoreListener();
                getClzb();
                //点击全部，选中全部或者取消全部
                $('#org10').checkbox({
                    onChange:function(checked){
                        if (checked){
                            checkAllOrg();
                        } else{
                            unCheckAllOrg();
                        }
                    }
                });
                getData();
                $('#btn').bind('click', function(){
                    getData();
                });
            });
        </script>
    </head>
    <body>
        <div style="position:fixed ; top:10px;width:1002;z-index: 10;background-color: white">
            <table border="0" >
                <!--工具栏-->
                <tr>
                    <td colspan="2">
                        <label>开始年月：</label>
                        <input id="startYearMonth" class="easyui-textbox" width="200px" prompt="输入格式：202108，表示2021年8月"/>
                        <label>结束年月：</label>
                        <input id="endYearMonth" class="easyui-textbox" width="200px" prompt="输入格式：202108，表示2021年8月"/>
                        <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">确定</a>
                    </td>
                </tr>

                <tr>
                    <td colspan="2">
                        <input class="easyui-checkbox" id="org1001" name="org" value="1001" labelPosition="after" labelAlign="left" label="镇江奥达">
                        <input class="easyui-checkbox" id="org1002" name="org" value="1002" labelPosition="after" labelAlign="left" label="丹阳奥达">
                        <input class="easyui-checkbox" id="org1003" name="org" value="1003" labelPosition="after" label="扬中奥达">
                        <input class="easyui-checkbox" id="org10" name="org" value="10"  labelPosition="after" label="全部">
                    </td>
                </tr>
                <tr>
                    <td colspan="2" id="ckdCheckboxes">

                    </td>
                </tr>
                <tr>
                    <td colspan="2" id="fbuCheckboxes">

                    </td>
                </tr>
            </table>
        </div>
        <div style="margin-top:150px">
            <table border="1"  >
                <tr>
                    <td>
                        <div id="chart1" style="width: 540px;height:400px;"></div>
                    </td>
                    <td>
                        <div id="chart2" style="width: 540px;height:400px;"></div>
                    </td>
                </tr>
                <tr>
                    <td><div class="chartContainer" id="chart3" style="width: 540px;height:400px;"></div></td>
                    <td><div  class="chartContainer" id="chart4" style="width: 540px;height:400px;"></div></td>
                </tr>
                <tr>
                    <td><div class="chartContainer" id="chart5" style="width: 540px;height:400px;"></div></td>
                    <td><div  class="chartContainer" id="chart6" style="width: 540px;height:400px;"></div></td>
                </tr>
                <tr>
                    <td colspan="2"><div class="chartContainer" id="chart7" style="width: 1080px;height:540px;"></div></td>                
                </tr>
            </table>
        </div>
    </body>

</html>
